<template>
<div>
    <!-- 搜索组件一级路由   $router.back()返回上一个页面 实际效果是页面上的活动按钮-->
    <van-nav-bar
      left-arrow
      title="搜索中心"
      @click-left="$router.back()">
    </van-nav-bar>

    <!-- https://youzan.github.io/vant/#/zh-CN/search
    input: 当输入内容变化时，它会触发
    @input="hGetSuggestion"对搜索进行防抖节流处理  本质是降低频率
    防抖：当这个函数被调用时，不立刻执行而是等待10秒（我们设定的时间）后再去执行，如果在这10秒内再次调用了这个函数，
    则从当前调用的时间开始计算再去等待10秒  @input="hGetSuggestion_with_fang_dou"
    节流：当函数被调用时，不是立即执行，而是检查本次执行距离上次执行的中间是否间隔10秒，如果间隔不足10秒则不去执行
    -->
    <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="hGetSuggestion_with_jie_liu"
      >
      <div slot="action" @click="hSearch">搜索</div>
      <!-- 、@click="hSearch"点击搜索添加到搜索历史记录中 -->
    </van-search>
    <!-- v-if="keyword v-else实现"联想建议 和 搜索历史 这两个区域是互斥的 -->
    <!-- 联想建议
    hSearchSuggestion(idx)点击联想建议添加到历史搜索中
    注意这个时候导入的是数组的下标，因为当前的是高亮显示需要去原来的非高亮中找相同下标的数据
    -->
    <van-cell-group v-if="keyword">
      <van-cell v-for="(item, idx) in cSuggestion"
      :key="idx"
      icon="search"
      @click="hSearchSuggestion(idx)">
      <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录
    有两种方式来保存用户搜索：
        把搜索记录放在服务器
        把搜索记录放在本地
    -->
    <van-cell-group v-else>
      <van-cell title="历史记录"></van-cell>
       <!-- @click="$router.push('/search/result?keyword='+ item)直接从搜索记录点击到搜索结果页面
       跳转到结果页：路由跳转并传入参数
        // 方式一：最朴素的拼接的方式
        // this.$router.push('/search/result?keyword=' + this.keyword)

        // 方式二：对象格式
        this.$router.push({
            path: '/search/result',
            query: {
                keyword: this.keyword
            }
        })
        -->
      <van-cell v-for="(item,idx) in history"
        :key="idx"
        @click="$router.push('/search/result?keyword='+ item)"
        :title="item">
        <!-- @click.stop 为了阻止冒泡 -->
         <van-icon name="close" @click.stop="hDeleteHistory(idx)" />
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
// 引入lodash库的方法做搜索框优化 防抖和节流
import _ from 'lodash'
import { getSuggestion } from '@/api/search.js'
// 历史记录刷新就没了要做本地处理
import { setItem, getItem } from '@/utils/storage'
// 消除魔术数
const SEARCHHISTORY_KEY = 'searchHistory'
export default {
  name: 'Search',
  data () {
    return {
      suggestion: [], // 当前的搜索建议
      // 初始化，先从本地存储中取值，取不到，则用[]
      history: getItem(SEARCHHISTORY_KEY) || [], // 保存搜索记录
      keyword: '' // 搜索关键字
    }
  },
  computed: {
    cSuggestion () {
      // 根据keyword，对 suggestion中的每一项进行正则替换，达到
      // 高亮的效果
      const reg = new RegExp(this.keyword, 'gi') // 定义一个正则表达式 g全局匹配 i不区分大小写
      const arr = this.suggestion.map(str => {
        //   map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
        // map() 方法按照原始数组元素顺序依次处理元素。返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
        // this.suggestion.map(str => {数组中的每个元素都会执行这个函数
        // str.replace(正则，函数)
        // str.replace(reg, (obj) =>reg是目标字符串  obj表示当前要匹配的内容 return是表示要替换的内容}
        return str.replace(reg, (obj) => {
          return `<span style="color:red;">${obj}</span>`
        })
      })
      return arr
    }
  },
  methods: {
    // 用户点击了删除历史记录
    hDeleteHistory (idx) {
      this.history.splice(idx, 1)
      // 对更新后的历史记录进行本地持久化
      //   setItem('abcd', this.history)
      setItem(SEARCHHISTORY_KEY, this.history)
    },
    // 用来向搜索记录中添加新项str
    // 搜索记录的基本规则
    // - 1. 不能有重复的项
    // - 2. 最近搜索记录应该放在最前面
    addHistory (str) {
      console.log('调用addHistory', str, '加入到搜索历史数组中')
      // 历史记录是一个数组，但，它不应该出现重复项
      const idx = this.history.findIndex(it => it === str)
      if (idx !== -1) {
        // 说明在历史记录中已经有这一项
        // 应该删除掉
        this.history.splice(idx, 1)
      }

      // 把当前的要添加的内容放在数据的最前面
      // unshift是在数组的前面添加，而push是在最后追加
      this.history.unshift(str)
      // 对更新后的历史记录进行本地持久化
      //   setItem('abcd', this.history)
      // 用这个常量值来代替魔术字符串
      setItem(SEARCHHISTORY_KEY, this.history)
    },
    // 用户在搜索建议项上 点击了一次
    hSearchSuggestion (idx) {
      // console.log(this.suggestion[idx])
      // 1. 把当前的搜索建议添加到搜索记录中
      const keyword = this.suggestion[idx]
      this.addHistory(keyword)
      // 2. 跳转到搜索结果页
      this.$router.push({
        path: '/search/result',
        query: {
          keyword
        }
      })
    },
    // 用户点击搜索按钮
    hSearch () {
      if (this.keyword === '') {
        return
      }
      this.addHistory(this.keyword)
      // 2. 跳转到搜索结果页
      this.$router.push({
        path: '/search/result',
        query: {
          keyword: this.keyword
        }
      })
    },
    // 当用户输入内容变化时，就会执行 需要进行防抖或者节流优化
    async hGetSuggestion () {
      console.log(this.keyword)
      if (this.keyword === '') {
        //   当用户搜索框空的时候无搜索建议
        this.suggestion = []
        return
      }
      // 1. 调用接口
      const result = await getSuggestion(this.keyword)
      // 2. 将获取的数据显示在建议区
      console.log(result)
      this.suggestion = result.data.data.options
    },
    // 搜索请求防抖处理
    // 方法一
    hGetSuggestion_with_fang_dou () {
      console.log('当前用户的输入', this.keyword)
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.hGetSuggestion()
      }, 5 * 100)
    },
    // 搜索请求节流处理
    hGetSuggestion_with_jie_liu () {
      console.log('当前用户的输入', this.keyword, (new Date()).toLocaleTimeString())
      // 以节流3s为例： (值越大，越不灵敏)
      // 对于本次调用，检查本次执行距离上一次执行中间是否相隔5秒
      // 是：执行，否：不执行

      if (this.timer) {
        return
      }
      this.timer = setTimeout(() => {
        this.timer = null
        this.hGetSuggestion()
      }, 300) //  3 * 1000
    },
    // 方法二
    // 基于lodash库提供的防抖
    hGetSuggestion_with_debounce: _.debounce(function () {
      console.log(this.keyword)
      this.hGetSuggestion()
    }, 500),
    // 基于lodash库提供的节流
    hGetSuggestion_with_throttle: _.throttle(function () {
      console.log(this.keyword)
      this.hGetSuggestion()
    }, 500)
  }
}
</script>

<style lang="less" scoped>

</style>
